import Swiper , { Navigation , Pagination , Autoplay} from "swiper"
import "swiper/swiper-bundle.css"

var options = {
    // 配置左右按钮的点击功能; 
    navigation: {
        // 下一个按钮; 
        nextEl: '.swiper-button-next',
        // 上一个按钮; 
        prevEl: '.swiper-button-prev',
    },
    // 配置分页器 
    pagination: {
        el: '.swiper-pagination',
        // 表示按钮是否可以通过点击切换页面; 
        clickable: true
    },
    // 无限循环 ： 
    loop: true,
    // 切换动画 
    effect: "slide",
    // 自动播放 
    autoplay: true ,
    // autoplay: {
    //     delay: 3000,
    //     stopOnLastSlide: false,
    //     disableOnInteraction: true,
    // } ,

    on: {
        slideChangeTransitionStart : function(){
            let banner = document.querySelector(".banner-container");
            // console.log( this.activeIndex );

            banner.classList.remove( `bg${ this.activeIndex - 1 }` );

            if( Number( this.activeIndex ) === 4){

                banner.classList.add(`bg${this.activeIndex - 3 }`);

            }else{

                banner.classList.add(`bg${this.activeIndex}`);

            }
  
        }
    }
};

Swiper.use([Navigation , Pagination , Autoplay]);

let mySwiper = new Swiper(".swiper" , options );





